<template>
	<view class="main-content">
		<index-header></index-header>
	    <view class="content">
			
			<view class="bg">
				<image class="logo_img" src="../../static/img/loginlogo.png"></image>
				<view class="login">
					<view class="header">
						<view class="switch">
							<text class="switch_btn " :class="switchType==1?'active':''" @click="switchTab(1)">快速登录</text>
							<text class="switch_btn"  :class="switchType==2?'active':''"  @click="switchTab(2)">快速注册</text>
						</view>
					</view>
					<view class="box" v-show="switchType==1">
						<view class="input-row">
							<text class="ulabel">用户名：</text><input  name="username" v-model="username" placeholder="请输入用户名" />
						</view>
						<view class="input-row ff">
							<text class="ulabel">密码：</text><input name="password" v-model="password" placeholder="请输入用户名" />
						</view>
						<button class="login_btn">登录</button>
					</view>
					<view class="box"  v-show="switchType==2">
						
						<view class="input-row">
							<text class="ulabel">用户名：</text><input  name="username" v-model="username" placeholder="团体用户建议用单位全称" />
						</view>
						<view class="input-row ff">
							<text class="ulabel">密码：</text><input name="password" v-model="password" placeholder="请输入用户名" />
						</view>
						<view class="input-row ff">
							<text class="ulabel">确认密码：</text><input name="passwordConfirm"  placeholder="请再次输入密码" />
						</view>
						<view class="input-row ff">
							<text class="ulabel">手机号码：</text><input name="passwordConfirm" placeholder="请输入手机号码" />
						</view>
						<view class="input-row ff">
							<text class="ulabel">验证码：</text><input class="code" name="passwordConfirm"  placeholder="请输入验证码" />
							<text class="get_code">获取验证码</text>
						</view>
						<button class="reg_btn">同意并注册</button>
					</view>
				</view>
			</view>
		<bottom></bottom>
	    </view>
			
	</view>
</template>

<script>
	export default{
		data() {
		    return {
				switchType:1,
				username:'',
				password:''
		    };
		},
		methods:{
			switchTab(type){
				
				this.switchType=type;
			}
		}
	}
	
</script>

<style lang="scss">
    .content {
       width: 100%;
       height: 100%;
       top: 108upx;
       left: 0;
       z-index: -1;
       background: url(../../static/img/bg.png);
    }
	.get_code{
		font-size: 14upx;
		width: 150upx;
		border-radius:2px ;
		background-color: #e2e2e2;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}
	.ff{
		margin-top: 50upx;
	}
	input{
		border: 1upx solid #D7D7D7;
		height: 50upx;
		color: #999;
		border-radius: 2upx;
		font-size: 14upx;
		padding: 5upx;
		width: 90%;
	}
	.login_btn{
		margin-top: 50upx;
		width: 150upx;
		background-color: #2795dc;
		color: #FFFFFF;
		height: 65upx;
		font-size: 26upx;
	}
	.code{
		width:160upx;
		margin-right: 10upx;
	}
	.reg_btn{
		margin-top: 50upx;
		margin-bottom: 50upx;
		width: 200upx;
		background-color: #2795dc;
		color: #FFFFFF;
		height: 70upx;
		font-size: 26upx;
	}
	.ulabel{
		width: 190upx;
	}
	.box{
		margin: 50upx;
	}
	.header{
		height: 100upx;
		border-bottom: 1upx solid #e2e2e2;
		width: 80%;
		position: relative;
		margin: 0 auto;
	}
	.switch{
		height: 55upx;
		position: absolute;
		bottom: 0;
		left: 100upx;
	}
	.switch_btn{
		padding: 8upx;
		margin-left: 20upx;
		color: #b7883e;
	}
	.active{
		border-bottom: 1upx solid #b7883e;
	}
	.bg{
		margin: 0 auto;
		margin-top: 200upx;
		margin-bottom: 200upx;
	}
	.logo_img{
		height: 136upx;
	}
	.login{
		background-color: #FFFFFF;
		padding-bottom: 50upx;
	}
</style>
